<template>
  <div class="logger-content">
    <div class="lc-header">
      <template v-if="currentClickNode.id">
        {{ currentClickNode.id + ' : ' + currentClickNode.name }}
      </template>
      <el-button type="text" size="small" style="margin-right: 10px" @click="clearLogger">清空日志</el-button>
    </div>
    <div class="lc-body">
      <div
          v-for="(item,index) in Loggers"
          :key="index"
          class="logger-item"
      >
        {{ item.Time }}:【{{ item.NodeId }}】：
        {{ item.Message }}
        <template v-if="item.NodeStatus===1">【状态码：{{ item.NodeStatus }}】</template>
        <template v-else>【状态码：{{ item.NodeStatus }},错误码：{{ item.Code }}】</template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
import { AppParams } from '@/utils/appParams'
import { Emitter } from "@/utils/Emitter";

import { useFlowStore } from "@/store/modules/flow/flowStore";

const FlowStore = useFlowStore()
// 定义 props
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  node: {
    type: Object,
    default: () => ({})
  }
})

// 定义 emits
const emit = defineEmits(['close'])

// 响应式数据
const Loggers = computed(() => {
  const NodeId = currentClickNode.value.id
  if (!NodeId) {
    return []
  }
  return FlowStore.GetLogger(NodeId) || []
})
const currentClickNode = ref({})

// 日志对象
const Logger = ref({
  NodeLogic: {
    Script: {
      OutParams: [{ ParamName: null, ValueType: null }],
      ScriptCode: AppParams.COMMON.USER_SCRIPT_TEMPLATE
    }
  },
  Desc: null
})

// 监听 show 属性变化
watch(
    () => props.show,
    (v) => {
      if (v) {
      }
    },
    { immediate: true }
)

// 方法定义
const clearLogger = () => {
  FlowStore.ClearLogger(currentClickNode.value.id)
}

const onNodeClick = (d = {}) => {
  currentClickNode.value = d
}

// const OnLogger = (Node) => {
//   FlowStore.UpdateLogger(Node)
// }

// 生命周期钩子
onMounted(() => {
  Emitter.on(AppParams.JAVA_SCRIPT_EVENT.NODE_CLICK, onNodeClick)
})

// 清理事件监听，防止内存泄漏
onUnmounted(() => {
  Emitter.off(AppParams.JAVA_SCRIPT_EVENT.NODE_CLICK, onNodeClick)
})
</script>

<style lang="less">
.logger-content {

  .lc-header {
    line-height: 50px;
    background-color: #545c64;
    color: #ffffff;
    padding: 0 10px;
  }

  .lc-body {
    overflow-y: scroll;
    height: calc(100vh - 150px);
    user-select: text;
  }

  .logger-item {
    font-size: 13px;
    margin: 6px 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(211, 210, 210, 0.7);
  }

  .logic-logger-body {
    flex: 1;
    display: flex;
    flex-direction: row;

    .logger-params {
      width: 300px;

      .logger-out {
        padding-right: 10px;

        .logger-out-item {
          display: flex;
          padding-top: 10px;
        }
      }
    }

    .logger-space {
      flex: 1;
    }

    .logger-desc {
      width: 300px;
      padding-left: 10px;
    }
  }

  .logic-logger-footer {
    margin-top: 10px;
    display: flex;
    justify-content: end;
  }

  .el-drawer__body {
    padding-top: 20px;
    height: calc(100% - 100px);
  }

  .el-drawer__header {
    background-color: #545c64;
    padding: 20px 10px;

    .el-drawer__title {
      color: #ffffff;
    }
  }
}
</style>
